<template>
  <page-layout title="关于" :show-back="true">
    <view class="about-page">
		<!-- 内容区域 -->
		<view class="about-content-container">
			<!-- Logo和应用名称 -->
			<view class="app-info">
				<image class="app-logo" src="/static/logo.png" mode="aspectFit"></image>
				<text class="app-name">岚迹</text>
				<text class="app-version">V1.0.0</text>
			</view>
			
			<!-- 介绍内容 -->
			<view class="section">
				<view class="section-title">
					<text>公司简介</text>
				</view>
				<view class="section-content">
					<text class="description">
						岚迹是一个专注于用户分享生活、交流想法的社区平台。我们致力于为用户提供一个自由、开放、友善的交流环境，让每一个人都能找到志同道合的朋友，分享自己的生活点滴和独特见解。
					</text>
				</view>
			</view>
			
			<view class="section">
				<view class="section-title">
					<text>产品理念</text>
				</view>
				<view class="section-content">
					<text class="description">
						我们相信，每个人都有自己独特的声音和视角，通过分享和交流，可以碰撞出更多的火花。岚迹希望打造一个真实、温暖、有深度的社区，让用户在这里找到归属感和价值认同。
					</text>
				</view>
			</view>
			
			<view class="section">
				<view class="section-title">
					<text>联系我们</text>
				</view>
				<view class="section-content">
					<view class="contact-item">
						<text class="label">官方网站：</text>
						<text class="value">www.xxxx.com</text>
					</view>
					<view class="contact-item">
						<text class="label">联系邮箱：</text>
						<text class="value">xxxx@xxx.com</text>
					</view>
					<view class="contact-item">
						<text class="label">官方微信：</text>
						<text class="value">xxxxxx</text>
					</view>
				</view>
			</view>
			
			<!-- 版权信息 -->
			<view class="copyright">
				<text>© 2024 岚迹科技有限公司 版权所有</text>
			</view>
		</view>
	</view>
  </page-layout>
</template>

<script setup>
import {onMounted} from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import PageLayout from "../../components/PageLayout.vue";

// 获取应用版本信息（实际场景下会从系统获取）
onMounted(() => {
	console.log('关于页面已加载');
});

// 返回上一页
const goBack = () => {
	console.log('返回按钮被点击');
	uni.navigateBack({
		delta: 1,
		fail: () => {
			uni.switchTab({
				url: '/pages/user/me'
			});
		}
	});
};
</script>

<style>
.about-page {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.about-content-container {
	padding: 15px;
}

.app-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 0;
}

.app-logo {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	margin-bottom: 15px;
}

.app-name {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
}

.app-version {
	font-size: 14px;
	color: #999;
}

.section {
	background-color: #ffffff;
	border-radius: 8px;
	margin-bottom: 15px;
	overflow: hidden;
}

.section-title {
	padding: 15px;
	border-bottom: 1px solid #f0f0f0;
}

.section-title text {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}

.section-content {
	padding: 15px;
}

.description {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

.contact-item {
	display: flex;
	margin-bottom: 10px;
}

.contact-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 14px;
	color: #333;
	width: 80px;
}

.value {
	font-size: 14px;
	color: #666;
	flex: 1;
}

.copyright {
	margin-top: 20px;
	margin-bottom: 40px;
	text-align: center;
}

.copyright text {
	font-size: 12px;
	color: #999;
}
</style> 